<template>
  <div class="main-card">
    <div class="page-header" style="justify-content: center;">
      <h2>编辑资料</h2>
    </div>
    <div class="edit-form">
      <div class="form-row">
        <label>头像：</label>
        <input type="file" accept="image/*" @change="onAvatarChange" />
        <img :src="avatar" alt="头像预览" class="avatar-preview" v-if="avatar" />
      </div>
      <div class="form-row">
        <label>用户名：</label>
        <input v-model="username" placeholder="请输入用户名" />
      </div>
      <div class="form-row">
        <label>个人名言：</label>
        <textarea v-model="motto" placeholder="请输入个人名言" class="motto-textarea" rows="3"></textarea>
      </div>
      <div class="form-row">
        <label>绑定邮箱：</label>
        <input v-model="email" placeholder="请输入邮箱" />
        <button class="primary-btn" @click="bindEmail" type="button">绑定</button>
      </div>
      <div class="form-row">
        <button class="primary-btn" @click="save">保存</button>
        <button class="danger-btn" @click="goBack" type="button">取消</button>
      </div>
      <div v-if="msg" class="msg">{{ msg }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const avatar = ref('https://cdn.jsdelivr.net/gh/duogongneng/oss-picbed/img/profile-default.png')
const username = ref('小明')
const motto = ref('努力让自己变得更好！')
const email = ref('')
const msg = ref('')
function onAvatarChange(e) {
  const file = e.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = ev => {
      avatar.value = ev.target.result
    }
    reader.readAsDataURL(file)
  }
}
function bindEmail() {
  if (!email.value) {
    msg.value = '请输入邮箱';
    return;
  }
  if (!/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)) {
    msg.value = '邮箱格式不正确';
    return;
  }
  msg.value = '邮箱绑定成功（模拟）';
}
function save() {
  msg.value = '保存成功（模拟）';
  setTimeout(() => {
    router.back()
  }, 1000)
}
function goBack() {
  router.back()
}
</script>
<style scoped>
.edit-form {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(37,99,235,0.08);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.form-row label {
  width: 80px;
  color: #2563eb;
  font-weight: bold;
}
input[type="text"], input[type="email"], input[type="file"] {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}
.avatar-preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 8px;
}
.primary-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.primary-btn:hover {
  background: #1e40af;
}
.danger-btn {
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
}
.danger-btn:hover {
  background: #c0392b;
}
.msg {
  color: #16a34a;
  margin-top: 10px;
  text-align: center;
}
.motto-textarea {
  flex: 1;
  min-height: 60px;
  max-height: 120px;
  resize: vertical;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  font-size: 1em;
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
  word-break: break-all;
  overflow-wrap: break-word;
}
</style> 